<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">申请人姓名</span>
          <el-input placeholder="请输入名称" v-model="param.data.name"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">审批状态</span>
          <el-select v-model="param.data.status" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">创建日期</span>
          <el-date-picker
            v-model="createdateList"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="table-body">
      <el-table :data="tableData" border v-loading="isLoading" style="width: 100%">
        <el-table-column prop="name" label="申请人姓名"></el-table-column>
        <el-table-column prop="idcardNum" label="身份证号"></el-table-column>
        <el-table-column prop="phone" label="申请人电话"></el-table-column>
        <el-table-column label="身份证图片" width="100">
          <template slot-scope="scope">
            <el-button @click="seePic(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              @click="agreeClick(scope.row)"
              v-if="scope.row.status==0&&isPermissionsBtn('delegeteNew_agree')"
              type="success"
              size="small"
            >同意</el-button>
            <el-button
              @click="refuseClick(scope.row)"
              v-if="scope.row.status==0&&isPermissionsBtn('delegeteNew_refuse')"
              type="danger"
              size="small"
            >拒绝</el-button>

            <el-button
              @click="handleToDetial(scope.row)"
              v-if="scope.row.status==1&&isPermissionsBtn('delegeteNew_see')"
              type="primary"
              size="small"
            >商品配置</el-button>
            <el-popconfirm title="确定撤销代理？" @onConfirm="handleToCancel(scope.row)">
               <el-button
               style="margin-left:15px"
              v-show="scope.row.status==1&&isPermissionsBtn('delegeteNew_cancel')"
              type="warning"
              size="small"
              slot="reference" 
            >撤销代理</el-button>
            </el-popconfirm>
           
            <span v-if="scope.row.status==2" style="color:red;font-size: 12px;">已拒绝</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="商品配置" :visible.sync="isVisible1" width="50%">
      <DelegeteNewAdd @submit="getMag" :data1="propdata1" v-if="isVisible1" />
    </el-dialog>

    <el-dialog title="同意" :visible.sync="isVisible" width="80%">
      <DelegeteNewDetail @submit="changeInfo" :data="propdata" v-if="isVisible" />
    </el-dialog>

    <el-dialog title :visible.sync="DialogVisiblePic" width="35%">
      <div class="pic">
        <span style="margin-right:40px">正面</span>
        <el-image style="width: 70%; height: 35%" :src="idcardPoitie" fit="fit"></el-image>
      </div>
      <div class="pic" style="margin-top:30px">
        <span class="title" style="margin-right:40px;">背面</span>
        <el-image style="width: 70%; height: 35%" :src="idcardBack" fit="fit"></el-image>
      </div>
    </el-dialog>

    <el-dialog title :visible.sync="DialogVisiblejj" width="40%">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="拒绝理由" prop="explain" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="3" placeholder="请填写" v-model="form.explain"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button plain @click="resetForm('formRef')">取消</el-button>
          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import DelegeteNewAdd from "./delegeteNewAdd";
import DelegeteNewDetail from "./delegeteNewDetail";
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      formLabelWidth: "100px",
      form: {
        explain: ""
      },
      rules: {
        explain: [{ required: true, message: "请填写理由", trigger: "blur" }]
      },
      isVisible: false,
      isVisible1: false,
      DialogVisiblejj: false,
      DialogVisiblePic: false,
      // url:
      // "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      productOptions: [
        { id: "0", title: "未审批" },
        { id: "1", title: "已同意" },
        { id: "2", title: "已拒绝" }
      ],
      param: {
        data: {
          name: "",
          status: "",
          startCreateTime: "",
          endCreateTime: ""
        },
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },

      createdateList: [],
      tableData: [],
      isLoading: true,
      total: 1,
      propdata: {},
      propdata1: "",
      idcardPoitie: "",
      idcardBack: "",
      cellData: ""
    };
  },
  components: {
    DelegeteNewAdd,
    DelegeteNewDetail
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  beforeMount() {},
  mounted() {
    this.initData();
  },
  methods: {
    seePic(scope) {
      this.DialogVisiblePic = true;
      this.idcardBack = scope.idcardBack;
      this.idcardPoitie = scope.idcardPoitie;
    },
    agreeClick(scope) {
      this.isVisible = true;
      this.propdata = JSON.parse(JSON.stringify(scope));
    },
    refuseClick(scope) {
      this.DialogVisiblejj = true;
      this.cellData = scope;
    },
    handleToDetial(scope) {
      this.isVisible1 = true;
      this.propdata1 = scope.id;
    },
    handleToCancel(scope) {
      this.$service.tAgentCancelAgent(scope.id).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "撤销成功",
            type: "success"
          });
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    initData() {
      this.isLoading = true;
      if (this.createdateList.length > 0) {
        this.param.data.startCreateTime = this.createdateList[0];
        this.param.data.endCreateTime = this.createdateList[1];
      }
      this.$service.tAgentList(this.param).then(res => {
        this.isLoading = false;
        if (res.code == "00000") {
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
          this.tableData = res.data.rows;
          this.total = res.data.total || 0;
        }
      });
    },
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.initData();
    },
    search() {
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    resetSearchCotnet() {
      //重置搜索条件
      this.param.data.name = "";
      this.param.data.status = "";
      this.param.data.startCreateTime = "";
      this.param.data.endCreateTime = "";
      this.createdateList = [];
    },
    resetForm(formName) {
      this.DialogVisiblejj = false;
      // this.$emit("submit", false);
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        let message = this.form;
        if (valid) {
          let param = {
            data: {
              id: this.cellData.id,
              appuerId: this.Global.user.userId,
              status: "2",
              appReult: message.explain
            }
          };
          this.$service.tAgentIsApproval(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.DialogVisiblejj = false;
              // this.$refs[formName].resetFields();
              this.initData();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },

    getMag(message) {
      this.isVisible1 = false;
      this.initData();
    },

    changeInfo() {
      this.isVisible = false;
      this.initData();
    }
  },
  watch: {}
};
</script>
<style scoped>
.pic {
  display: flex;
}
</style>